<!-- 选择院校位置
@author RickoNoNo3

接收参数:
  eduId 用户当前选择的eduId
返回参数(通过调用上级页面的getEduId(eduId)函数):
  eduId 用户新选择的eduId
如果选择了取消, 则什么也不返回.
-->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover" />
		<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
		<link rel="stylesheet" href="../Common/css/lib/materialize.min.css">
		<link rel="stylesheet" href="../Common/css/ufun.css">
		<script src="../Common/js/lib/jquery-3.4.1.min.js"></script>
		<script src="../Common/js/lib/materialize.min.js"></script>
		<script src="../Common/js/tools.js"></script>
		<script src="location-data.js" type="text/javascript"></script>
		<style type="text/css">
			body {
				background: var(--color-white);
			}

			header {
				background: var(--color-yellow);
			}

			#Right {
				display: none;
				/* 只有校圈完整选择后才显示 */
			}

			li {
				position: relative;
			}

			li.active::before {
				content: "";
				position: absolute;
			}

			#CurrentSchoolHolder {
				display: flex;
				width: 100%;
				padding: 2vw 4vw;
				height: max-content;
				overflow: hidden;
				color: var(--color-gray-medium);
				border-top: 1px solid var(--color-gray-white);
				transition: height 0.2s ease-in-out;
			}

			#CurrentSchoolHolder>div:first-child {
				flex: none;
			}

			#CurrentSchoolHolder>div:last-child {
				flex: auto;
			}

			#FlexBox0 {
				flex: auto;
				display: flex;
			}

			#CountrySelect {
				display: flex;
				background-color: var(--color-white);
				width: 100%;
				border-top: 1px solid var(--color-gray-white);
				border-bottom: 1px solid var(--color-gray-white);
				font-size: 4vw;
				white-space: nowrap;
				overflow-x: auto;
				overflow-y: hidden;
			}

			#CountrySelect>li {
				display: flex;
				padding: 2.5vw 4vw;
				width: max-content;
				justify-content: flex-start;
				align-items: center;
			}

			#CountrySelect>li.active::before {
				top: 0;
				left: 0;
				width: 100%;
				border-top: 6px solid var(--color-yellow);
			}

			#ProvinceSelect {
				flex: none;
				width: 25vw;
				background: var(--color-white);
				border-right: 1px solid var(--color-gray-white);
				overflow-y: auto;
			}

			#ProvinceSelect>li {
				padding: 2vw 0;
				width: 100%;
				text-align: center;
				overflow: hidden;
			}

			#ProvinceSelect>li.active::before {
				top: 0;
				left: 0;
				height: 100%;
				border-left: 6px solid var(--color-yellow);
			}

			#SchoolSelect {
				flex: auto;
				overflow-y: auto;
			}

			.school-group>div:first-child {
				margin: 1.5vw;
				color: var(--color-gray-medium);
			}

			#DeptSelect,
			.school-group>ul {
				display: flex;
				flex-wrap: wrap;
			}

			.school-group>ul {
				margin: 1vw 3vw;
			}

			#DeptSelect>li,
			.school-group>ul>li {
				border: 1px solid var(--color-gray-white);
				width: max-content;
				padding: 1vw;
				margin: 0.5vw 1vw;
				overflow-y: auto;
				overflow-x: hidden;
				word-break: break-all;
				transition: border-color 0.1s ease-out, border-width 0.1s ease-out;
			}

			.school-group>ul>li.active {
				border-top: 6px solid var(--color-yellow);
				width: 100%;
			}

			#DeptSelect>li:active {
				background-color: var(--color-yellow);
			}
		</style>
	</head>
	<body>
		<header>
			<div id="Left" class="com-btn" onmouseup="ThisClose();">
				<i class="material-icons">close</i>
			</div>
			<div id="Title">选择位置</div>
			<div id="Right" class="com-btn" onmouseup="submit();">
				<i class="material-icons">done</i>
			</div>
		</header>
		<div class="content fixed">
			<div id="CurrentSchoolHolder">
				<div>当前位置：</div>
				<div>
					<span id="CurrentSchool"></span>
					<span>-</span>
					<span id="CurrentDept"></span>
				</div>
			</div>
			<ul id="CountrySelect"></ul>
			<div id="FlexBox0">
				<ul id="ProvinceSelect"></ul>
				<div id="SchoolSelect">
					<div class="school-group">
						<div>该地区热门校圈</div>
						<ul id="SchoolHot"></ul>
					</div>
					<div class="school-group">
						<div>其他校圈</div>
						<ul id="SchoolOthers"></ul>
					</div>
				</div>
			</div>
		</div>
		<ul id="DeptSelect"></ul>
	</body>

	<script type="text/javascript">
		var current;
		var eduId;
		var eduIdOld = '000000000000';
		var deptList = $("#DeptSelect");
		/*测试用
		country(Data["countries"]);
		localeToOld();*/

		document.addEventListener('plusready', function() {
			GetStatusTop();
			current = plus.webview.currentWebview();
			eduIdOld = current.eduId;
			if (plus.storage.getItem('eduList') !== null) {
				initPage();
			}
			RefreshEduList(function() {
				initPage();
			})
			DoShow(current, "slide-in-right", 200);
		});

		// 初始化页面, 定位到当前edu位置
		function initPage() {
			country(JSON.parse(plus.storage.getItem('eduList')));
			try {
				localeToOld();
			} catch (e) {}
		}

		// 返回有效的新eduId, 通过调用上级页面getEduId(eduId)来实现
		function submit() {
			if (eduId.length != 12) {
				plus.nativeUI.alert('请选择一个有效位置', {}, '信息错误');
			}
			current.opener().evalJS(`try {
				getEduId("` + eduId + `");
			} catch(e) {
				plus.nativeUI.toast('您的提交无效')
			}`);
			ThisBack();
		}

		// 定位到当前edu位置
		function localeToOld() {
			var eduId_country, eduId_province, eduId_school, eduId_dept;
			eduId_country = eduIdOld.substring(0, 3);
			eduId_province = eduIdOld.substring(3, 6);
			eduId_school = eduIdOld.substring(6, 9);
			eduId_dept = eduIdOld.substring(9, 12);
			$('#CountrySelect li[countryid="' + eduId_country + '"]').click();
			$('#ProvinceSelect li[provinceid="' + eduId_province + '"]').click();
			$('#SchoolSelect li[schoolid="' + eduId_school + '"]').click();
			$('#DeptSelect li[deptid="' + eduId_dept + '"]').click();
		}

		// 处理一个当前选择的新edu位置
		function updateFromNew() {
			var eduId_country, eduId_province, eduId_school, eduId_dept;
			try {
				// 处理eduId
				eduId_country = $('#CountrySelect>li.active').attr('countryId');
				eduId_province = $('#ProvinceSelect>li.active').attr('provinceId');
				eduId_school = $('.school-group>ul>li.active').attr('schoolId');
				eduId_dept = $('#DeptSelect>li.active').attr('deptId');
				eduId = eduId_country + eduId_province + eduId_school + eduId_dept;
				// 处理选择项预览
				$("#CurrentSchool").text($('.school-group>ul>li.active>span:first-child').text());
				$("#CurrentDept").text($('#DeptSelect>li.active').text());
				// 处理确定按钮
				if (eduId !== null && eduId !== eduIdOld)
					$('#Right').css('display', 'flex');
				else
					$('#Right').css('display', 'none');
			} catch (e) {
				console.log(e);
				eduId = null;
				$('#Right').css('display', 'none');
			}
		}

		///
		//   以下是整套列表显示和点击事件的处理逻辑(四层)
		//
		function country(countries) {
			$("#CountrySelect").html("");
			$("#ProvinceSelect").html("");
			$(".school-group>ul").html("");
			$("#DeptSelect").html("");
			$.each(countries, function(i, v) {
				$("#CountrySelect").append('<li i=' + i + ' countryId="' + v['id'] + '">' + v['name'] + '</li>');
			});
			$("#CountrySelect>li").click(function() {
				$("#CountrySelect>li").removeClass("active");
				$(this).addClass("active");
				province(countries[$(this).attr('i')]['provinces']);
				// 界面优化
				$('#SchoolSelect').css('display', 'none');
			});
		}

		function province(provinces) {
			$("#ProvinceSelect").html("");
			$(".school-group>ul").html("");
			$("#DeptSelect").html("");
			$.each(provinces, function(i, v) {
				$("#ProvinceSelect").append('<li i=' + i + ' provinceId="' + v['id'] + '">' + v['name'] + '</li>');
			});
			$("#ProvinceSelect>li").click(function() {
				$("#ProvinceSelect>li").removeClass("active");
				$(this).addClass("active");
				school(provinces[$(this).attr('i')]['schools']);
				// 界面优化
				$('#SchoolSelect').css('display', 'inline-block');
			});
		}

		function school(schools) {
			$(".school-group>ul").html("");
			$("#DeptSelect").html("");
			$.each(schools, function(i, v) {
				var query = '#SchoolOthers';
				if (v['famous'])
					query = '#SchoolHot'
				// 由于院系元素叠加在其中, 想要获取学校名称, 因此包裹一个span
				$(query).append('<li i=' + i + ' schoolId="' + v['id'] + '"><span>' + v['name'] + '</span></li>');
			});
			$(".school-group>ul>li").click(function() {
				$(".school-group>ul>li").removeClass("active");
				$(this).addClass("active");
				dept(schools[$(this).attr('i')]['depts']);
			});
		}

		function dept(depts) {
			$(".school-group>ul>li.active").append(deptList);
			$("#DeptSelect").html("");
			$.each(depts, function(i, v) {
				$("#DeptSelect").append('<li i=' + i + ' deptId="' + v['id'] + '">' + v['name'] + '</li>');
			});
			$("#DeptSelect>li").click(function() {
				$("#DeptSelect>li").removeClass("active");
				$(this).addClass("active");
				updateFromNew();
			});
		}
	</script>
</html>
